import { useRoutes } from 'react-router-dom'
// import Layout from '../pages/Layout'
// import Login from '../pages/Login'
// import NotFound from '../pages/NotFound'
import Auth from '@/components/auth'
import Task from '../pages/task'
import Home from '@/pages/home'
import Article from '@/pages/Article'
import Publish from '@/pages/Publish'
import { lazy } from 'react'
// 懒加载
const Layout = lazy(() => import('../pages/Layout'))
const Login = lazy(() => import('../pages/Login'))
const NotFound = lazy(() => import('../pages/NotFound'))

export default function WrapperRoutes() {
  const routes = [
    {
      path: '/',
      // element: <Layout />,
      element: (
        <Auth>
          <Layout />
        </Auth>
      ),
      // element: <Auth element={<Layout />} />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: '/article',
          element: <Article />,
        },
        {
          //  /* 的作用是可以复用 路由 普通路由 + 动态路由
          path: '/publish/*',
          element: <Publish />,
        },
      ],
    },
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/task',
      element: <Task />,
    },
    {
      path: '*',
      element: <NotFound />,
    },
  ]
  return useRoutes(routes)
}
